<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <title>用户注册页面</title>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}"/>
    <style type="text/css">

        table tr td {
            padding: 10px;
        }

    </style>

</head>
<body>
<div style="padding: 20px">
    <form name="myForm" method="post">
        <table>
            <tr>
                <td>高校：</td>
                <td>
                    <select id="deptId" class="layui-input">
                        <option value="">请选择一个高校</option>
                        <option th:value="${dept.deptId}" th:text="${dept.deptName}" th:each="dept:${depts}"></option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>职称/身份：</td>
                <td>
                    <select id="postId" class="layui-input">
                        <option value="">请选择一个职称</option>
                        <option th:value="${post.postId}" th:text="${post.postName}" th:each="post:${posts}"></option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>姓名：</td>
                <td><input type="text" id="name" name="name" class="layui-input"/></td>
            </tr>
            <tr>
                <td>用户名/账号：</td>
                <td><input type="text" id="userName" name="userName" class="layui-input"/></td>
            </tr>
            <tr>
                <td>密 码：</td>
                <td><input type="password" id="password" name="password" class="layui-input"/></td>
            </tr>
            <tr>
                <td>确认密码：</td>
                <td><input type="password" id="password2" name="password2" class="layui-input"/></td>
            </tr>
            <tr>
                <td>邮箱：</td>
                <td><input type="text" id="email" name="email" class="layui-input"/></td>
            </tr>
            <tr>
                <td>验证：</td>
                <td>
                    <div data-vid="5d8474d0fc650e5af4ec42f7" style="width: 200px;height: 36px;">
                        <div class="vaptcha-init-main">
                            <div class="vaptcha-init-loading">
                                <a href="/" target="_blank">
                                    <img src="https://cdn.vaptcha.com/vaptcha-loading.gif"/>
                                </a>
                                <span class="vaptcha-text">Vaptcha启动中...</span>
                            </div>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <button id="sbtn" class="layui-btn" onclick="submitData();return false;">注册</button>
                </td>
                <td><font id="errorInfo" color="red"></font></td>
            </tr>
        </table>

    </form>
</div>

<script th:src="@{/layui/layui.js}" type="text/javascript"></script>
<script th:src="@{/js/jquery.js}" type="text/javascript"></script>
<script src="https://cdn.vaptcha.com/v2.js"></script>
<script>

    layui.use(['form', 'layer'], function () {
        var form = layui.form;
        var layer = layui.layer;
    });

    function submitData() {

        var username = $("#userName").val().trim();
        var password = $("#password").val().trim();
        var password2 = $("#password2").val().trim();
        var email = $("#email").val().trim();
        var name = $("#name").val().trim();
        var deptId = $("#deptId").val().trim();
        var postId = $("#postId").val().trim();

        if (deptId == '') {
            $("#errorInfo").text("请选择一个高校！");
            return false;
        }

        if (postId == '') {
            $("#errorInfo").text("请选择一个职称！");
            return false;
        }

        if (username == '') {
            $("#errorInfo").text("请输入用户名！");
            return false;
        }

        if (password == '') {
            $("#errorInfo").text("请输入密码！");
            return false;
        }

        if (password2 == '') {
            $("#errorInfo").text("请输入确认密码！");
            return false;
        }

        if (email == '') {
            $("#errorInfo").text("请输入邮箱！");
            return false;
        }

        if (password != password2) {
            $("#errorInfo").text("确认密码不对！");
            return false;
        }

        if (myForm.vaptcha_token.value == "") {
            $("#errorInfo").text("请进行人机验证！");
            return false;
        }

        var index = layer.load(0, {
            shade: [0.1, '#fff'] //0.1透明度的白色背景
        });

        $("#sbtn").attr('disabled', true);
        $("#errorInfo").text("");

        $.post("/register", {
            loginName: $("#userName").val().trim(),
            password: $("#password").val().trim(),
            email: $("#email").val().trim(),
            userName: name,
            deptId: deptId,
            postId: postId,
            vaptcha_token: myForm.vaptcha_token.value
        }, function (result) {
            layer.close(index);
            $("#sbtn").attr('disabled', false);
            if (result.success) {
                alert("恭喜您，注册成功！");
                parent.reloadPage();
            } else {
                $("#errorInfo").text(result.errorInfo);
                if ('人机验证失败！' == result.errorInfo) {
                    alert('人机验证失败！');
                    window.location.reload();
                }
            }
        }, "json");


    }

</script>
</body>
</html>